<div class="feature-view">
    <div hide-empty="['{{ ctrl.showStatus }}']">
        <!-- Scrum Widget -->
        <div id="scrum-widget-view" class="col-lg-12 col-sm-6 animate-show" ng-show="ctrl.showStatus.scrum">
            <div class="widget">
                <div hide-empty="['{{ ctrl.projectName }}', '{{ ctrl.teamName }}']">
                    <div class="widget-body">
                        <div class="col-xs-9.5 text-standard-sm dash-overflow">
                            Project: <em>{{ctrl.projectName}}</em>
                        </div>
                        <div class="col-xs-9.5 text-standard-sm dash-overflow">
                            Team: <em>{{ctrl.teamName}}</em>
                        </div>
                    </div>
                </div>
                <br>
                <div>
                    <div class="widget-heading">Iteration:
                        <button id="next-btn" class="pull-right btn-default btn-xm active"
                                ng-show="ctrl.numberOfSprintTypes === 2" ng-click="ctrl.animateAgileView(true)"><i
                                class="fa fa-fast-forward"></i></button>
                        <button id="{{ctrl.pausePlaySymbol}}-btn" class="pull-right btn-default btn-xm active"
                                ng-show="ctrl.numberOfSprintTypes === 2" ng-click="ctrl.pauseAgileView()"
                                ng-model="ctrl.pausePlaySymbol"><i class="fa fa-{{ctrl.pausePlaySymbol}}"></i></button>
                    </div>
                    <div class="widget-body" fit-text=".build-summary-count > span" fit-text-max="40">
                        <div hide-empty="['{{ ctrl.iterations[0].name }}']">
                            <div ng-repeat="iteration in ctrl.iterations">
                                <div class="col-xs-2.5 text-lg pull-right">
                                    {{iteration.tilEnd}}
                                </div>
                                <div class="col-xs-9.5 text-lg dash-overflow feature-link"
                                     ng-if="iteration.url !== undefined && iteration.url !== null && iteration.url !== ''">
                                    <a ng-href="{{::iteration.url}}" target="_blank" rel="noopener noreferrer">{{iteration.name}}</a>
                                </div>
                                <div class="col-xs-9.5 text-lg dash-overflow"
                                     ng-if="iteration.url === undefined || iteration.url === null || iteration.url === ''">
                                    {{iteration.name}}
                                </div>
                            </div>
                        </div>
                        <div hide-empty="['{{ ctrl.openStoryPoints }}', '{{ ctrl.wipStoryPoints }}', '{{ ctrl.doneStoryPoints}}']">
                            <div class="row">
                                <div class="col-xs-4">
                                    <div class="story-summary-count story-open">
                                        <span>{{ctrl.openStoryPoints}}</span>
                                    </div>
                                    <div class="story-summary-type">Open</div>
                                </div>
                                <div class="col-xs-4">
                                    <div class="story-summary-count story-wip">
                                        <span>{{ctrl.wipStoryPoints}}</span>
                                    </div>
                                    <div class="story-summary-type">WIP</div>
                                </div>
                                <div class="col-xs-4">
                                    <div class="story-summary-count story-done">
                                        <span>{{ctrl.doneStoryPoints}}</span>
                                    </div>
                                    <div class="story-summary-type">Done</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="widget">
                <div class="widget-body" ng-if="ctrl.listType === 'epics'">

                    <div class="widget-heading">Epics in Progress
                        <button class="pull-right btn-default btn-xm active" ng-show="ctrl.showFeatureLimitButton"
                                ng-click="ctrl.setFeatureLimit()" ng-init="ctrl.featureLimit=4">+/-
                        </button>
                    </div>
                    <div hide-empty="['{{ ctrl.epicStoryPoints[0] }}']">
                        <div class="dash-row" ng-repeat="epic in ctrl.epicStoryPoints | limitTo:ctrl.featureLimit">
                            <div class="pull-right">{{epic.sEstimate}}</div>

                            <div class="dash-overflow feature-link"
                                 ng-if="epic.sEpicUrl !== undefined && epic.sEpicUrl !== null && epic.sEpicUrl !== ''">
                                <div class="dash-overflow"
                                     ng-if="epic.sEpicAssetState !== 'Done' && issue.sEpicAssetState !== 'accepted'">
                                    <a ng-href="{{::epic.sEpicUrl}}" target="_blank" rel="noopener noreferrer">{{epic.sEpicName}}</a>
                                </div>
                                <div class="dash-overflow issue-done"
                                     ng-if="epic.sEpicAssetState === 'Done' || epic.sEpicAssetState === 'accepted'">
                                    <a ng-href="{{::epic.sEpicUrl}}" target="_blank" rel="noopener noreferrer">{{epic.sEpicName}}</a>
                                </div>
                            </div>
                        </div>
                        <div class="dash-overflow"
                             ng-if="epic.sEpicUrl === undefined || epic.sEpicUrl === null || epic.sEpicUrl === ''">
                            <div class="dash-overflow"
                                 ng-if="epic.sEpicAssetState !== 'Done' && epic.sEpicAssetState !== 'accepted'">
                                {{epic.sEpicName}}
                            </div>
                            <div class="dash-overflow issue-done"
                                 ng-if="epic.sEpicAssetState === 'Done' || epic.sEpicAssetState === 'accepted'">
                                {{epic.sEpicName}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="widget-body" ng-if="ctrl.listType === 'issues'">

                <div class="widget-heading">Issues in Progress
                    <button class="pull-right btn-default btn-xm active" ng-show="ctrl.showFeatureLimitButton"
                            ng-click="ctrl.setFeatureLimit()" ng-init="ctrl.featureLimit=4">+/-
                    </button>
                </div>
                <div hide-empty="['{{ ctrl.issueStoryPoints[0] }}']">
                    <div class="dash-row" ng-repeat="issue in ctrl.issueStoryPoints | limitTo:ctrl.featureLimit">
                        <div class="pull-right" ng-if="ctrl.estimateMetricType === 'storypoints'">
                            {{issue.sEstimate}}
                        </div>
                        <div class="pull-right" ng-if="ctrl.estimateMetricType === 'hours'">
                            {{issue.sEstimateTime}}
                        </div>
                        <div class="feature-link"
                             ng-if="issue.sUrl !== undefined && issue.sUrl !== null && issue.sUrl !== ''">
                            <div class="dash-overflow"
                                 ng-if="issue.sStatus !== 'done' && issue.sStatus !== 'accepted'">
                                <a ng-href="{{::issue.sUrl}}" target="_blank" rel="noopener noreferrer">{{issue.sName}}</a>
                            </div>
                            <div class="dash-overflow issue-done"
                                 ng-if="issue.sStatus === 'done' || issue.sStatus === 'accepted'">
                                <a ng-href="{{::issue.sUrl}}" target="_blank" rel="noopener noreferrer">{{issue.sName}}</a>
                            </div>
                        </div>
                        <div ng-if="issue.sUrl === undefined || issue.sUrl === null || issue.sUrl === ''">
                            <div class="dash-overflow"
                                 ng-if="issue.sStatus !== 'done' && issue.sStatus !== 'accepted'">{{issue.sName}}
                            </div>
                            <div class="dash-overflow issue-done"
                                 ng-if="issue.sStatus === 'done' || issue.sStatus === 'accepted'">{{issue.sName}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Kanban Widget -->
        <div id="kanban-widget-view" class="col-lg-12 col-sm-6 animate-show" ng-show="ctrl.showStatus.kanban">
            <div class="widget">
                <div hide-empty="['{{ ctrl.projectName }}', '{{ ctrl.teamName }}']">
                    <div class="widget-body">
                        <div class="col-xs-9.5 text-standard-sm dash-overflow">
                            Project: <em>{{ctrl.projectName}}</em>
                        </div>
                        <div class="col-xs-9.5 text-standard-sm dash-overflow">
                            Team: <em>{{ctrl.teamName}}</em>
                        </div>
                    </div>
                </div>
                <br>
                <div>
                    <div class="widget-heading">Iteration:
                        <button id="next-btn" class="pull-right btn-default btn-xm active"
                                ng-show="ctrl.numberOfSprintTypes === 2" ng-click="ctrl.animateAgileView(true)"><i
                                class="fa fa-fast-forward"></i></button>
                        <button id="{{ctrl.pausePlaySymbol}}-btn" class="pull-right btn-default btn-xm active"
                                ng-show="ctrl.numberOfSprintTypes === 2" ng-click="ctrl.pauseAgileView()"
                                ng-model="ctrl.pausePlaySymbol"><i class="fa fa-{{ctrl.pausePlaySymbol}}"></i></button>
                    </div>
                    <div class="widget-body" fit-text=".build-summary-count > span" fit-text-max="40">
                        <div hide-empty="['{{ ctrl.iterationsKanban[0] }}']">
                            <div ng-repeat="iteration in ctrl.iterationsKanban">
                                <div class="col-xs-2.5 text-lg pull-right">
                                    {{iteration.tilEnd}}
                                </div>
                                <div class="col-xs-9.5 text-lg dash-overflow">
                                    <em>{{iteration.name}}</em>
                                </div>
                            </div>
                        </div>
                        <div hide-empty="['{{ ctrl.openStoryPointsKanban }}', '{{ ctrl.wipStoryPointsKanban }}']">
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="story-summary-count story-open">
                                        <span>{{ctrl.openStoryPointsKanban}}</span>
                                    </div>
                                    <div class="story-summary-type">Open</div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="story-summary-count story-wip">
                                        <span>{{ctrl.wipStoryPointsKanban}}</span>
                                    </div>
                                    <div class="story-summary-type">WIP</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="widget">
                <div class="widget-body" ng-if="ctrl.listType === 'epics'">

                    <div class="widget-heading">Epics in Progress
                        <button class="pull-right btn-default btn-xm active" ng-show="ctrl.showFeatureLimitButton"
                                ng-click="ctrl.setFeatureLimit()" ng-init="ctrl.featureLimit=4">+/-
                        </button>
                    </div>
                    <div hide-empty="['{{ ctrl.epicStoryPointsKanban[0] }}']">
                        <div class="dash-row"
                             ng-repeat="epic in ctrl.epicStoryPointsKanban | limitTo:ctrl.featureLimit">
                            <div class="pull-right">{{epic.sEstimate}}</div>
                            <div class="dash-overflow feature-link"
                                 ng-if="epic.sEpicUrl !== undefined && epic.sEpicUrl !== null && epic.sEpicUrl !== ''">
                                <a ng-href="{{::epic.sEpicUrl}}" target="_blank" rel="noopener noreferrer">{{epic.sEpicName}}</a>
                            </div>
                            <div class="dash-overflow"
                                 ng-if="epic.sEpicUrl === undefined || epic.sEpicUrl === null || epic.sEpicUrl === ''">
                                {{epic.sEpicName}}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="widget-body" ng-if="ctrl.listType === 'issues'">

                    <div class="widget-heading">Issues in Progress
                        <button class="pull-right btn-default btn-xm active" ng-show="ctrl.showFeatureLimitButton"
                                ng-click="ctrl.setFeatureLimit()" ng-init="ctrl.featureLimit=4">+/-
                        </button>
                    </div>
                    <div hide-empty="['{{ ctrl.issueStoryPointsKanban[0] }}']">
                        <div class="dash-row"
                             ng-repeat="issue in ctrl.issueStoryPointsKanban | limitTo:ctrl.featureLimit">
                            <!-- If ctrl.estimateMetricType === 'count', we don't display the estimate number since it doesn't make sense to display 1 against each issue -->
                            <div class="pull-right" ng-if="ctrl.estimateMetricType === 'storypoints'">
                                {{issue.sEstimate}}
                            </div>
                            <div class="pull-right" ng-if="ctrl.estimateMetricType === 'hours'">
                                {{issue.sEstimateTime}}
                            </div>
                            <div class="feature-link"
                                 ng-if="issue.sUrl !== undefined && issue.sUrl !== null && issue.sUrl !== ''">
                                <div class="dash-overflow"
                                     ng-if="issue.sStatus !== 'done' && issue.sStatus !== 'accepted'">
                                    <a ng-href="{{::issue.sUrl}}" target="_blank" rel="noopener noreferrer">{{issue.sName}}</a>
                                </div>
                                <div class="dash-overflow issue-done"
                                     ng-if="issue.sStatus === 'done' || issue.sStatus === 'accepted'">
                                    <a ng-href="{{::issue.sUrl}}" target="_blank" rel="noopener noreferrer">{{issue.sName}}</a>
                                </div>
                            </div>
                            <div ng-if="issue.sUrl === undefined || issue.sUrl === null || issue.sUrl === ''">
                                <div class="dash-overflow"
                                     ng-if="issue.sStatus !== 'done' && issue.sStatus !== 'accepted'">{{issue.sName}}
                                </div>
                                <div class="dash-overflow issue-done"
                                     ng-if="issue.sStatus === 'done' || issue.sStatus === 'accepted'">{{issue.sName}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
